<template>
  <div class="total" style="display: flex;flex-wrap: wrap;justify-content:space-around">
    <div>
      <el-card class="data-card" style="width: 25vw;height: 25vh;background-color: #1e9fff;">
        <template #header>
          <div class="card-header">
            <span>数据</span>
          </div>
        </template>
        <div class="card-content" style="display: flex;justify-content: space-around">
          <div class="item">
            <div class="label">学车总人数</div>
            <div class="value">{{ soldQuantity }}</div>
          </div>
          <div class="item">
            <div class="label">毕业人数</div>
            <div class="value">{{ unsoldQuantity }}</div>
          </div>
          <div class="item">
            <div class="label">历史毕业率</div>
            <div class="value">{{ positiveRating }}%</div>
          </div>
        </div>
      </el-card>
      <el-card style="width: 20vw;height: 50vh;margin-top: 20px">
        <template #header>
          <div class="card-header">
            <span>分布</span>
          </div>
        </template>
        <div  id="main" style="width: 15vw;height: 50vh">
        </div>
      </el-card>
    </div>

    <el-card style="width: 40vw;height: 70vh">
      <template #header>
        <div class="card-header">
          <span>学习情况</span>
        </div>
      </template>
      <div  id="line" style="width: 35vw;height: 50vh">
      </div>
    </el-card>
  </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "finally",
  data(){
    return{
      option:{
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
            left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: {
            borderRadius: 10
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 2, name: '科目一' },
            { value: 8, name: '科目二' },
            { value: 5, name: '科目三' },
            { value: 1, name: '科目四' },
          ]
        }
      ]
    },
      option1:{
        xAxis: {
          type: 'category',
          data: ['科目一', '科目二', '科目三', '科目四']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
            ],
            type: 'bar'
          }
        ]
      },
      soldQuantity: 200,
      unsoldQuantity: 100,
      positiveRating: 100,
    }

  },
  methods:{
    initial(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      this.option && myChart.setOption(this.option);
      var chartDom1 = document.getElementById('line');
      var myChart1 = echarts.init(chartDom1);
      this.option1 && myChart1.setOption(this.option1);
    }
  },
  mounted() {
    this.initial()
  },
  created() {
    // this.initial()
  }
}
</script>

<style scoped>
.value{
  font-family: PingFang SC, Arial, Microsoft YaHei, sans-serif;
}
</style>